<template>
	<view>
		<!-- <view style="height:var(--status-bar-height);width: 100%;">xxx</view> -->
		<u-navbar :back-text-style="{color: '#fff'}" title-color="#fff" back-icon-color="#ffffff"
			back-icon-name="arrow-leftward" title="禾积分账户" :background="NavBackgroud"
			></u-navbar>
		<view class='my-account' >
			<view class='wrapper padding'>
				<view class='header'>
					<view class='headerCon'>
						<view class='account acea-row row-top row-between'>
							<view class='assets' style="width: 100%;">
								<view class="flex justify-between">
									<view class="flex-sub">账户总资产折合</view>
									<view class="flex-sub flex justify-end" @click="toIdentity"><text
											class='cu-tag margin-left round'
											:class="identityResultColor(userInfo.identityResult)">{{identityResultFormat(userInfo.identityResult)}}</text>
									</view>
								</view>
								<view class='money' style="margin-top: 15rpx;">{{userInfo.token||0.000000000}} <text
										class="unit">LHT</text></view>
								<view style="font-weight: bold;margin-top: 15rpx;">
									≈{{Number(userInfo.token*currentPrice).toFixed(2)}} CNY</view>
							</view>
						</view>
					</view>
				</view>
				<view class='nav acea-row row-middle'>
					<navigator class='item' hover-class='none'
						:url='"/pages/purse/recharge/recharge?tokenAddress="+userInfo.tokenAddress'>
						<view class='pictrue'>
							<image src='../../../static/images/in.png'></image>
						</view>
						<view>转入</view>
					</navigator>
					<navigator class='item' hover-class='none' url='/pages/purse/cash/cash'>
						<view class='pictrue'>
							<image src='../../../static/images/out.png'></image>
						</view>
						<view>转出</view>
					</navigator>
					<navigator class='item' hover-class='none' url='/pages/purse/capitalFlow/capitalFlow'>
						<view class='pictrue'>
							<image src='../../../static/images/record1.png'></image>
						</view>
						<view>流水</view>
					</navigator>
					<navigator class='item' hover-class='none' url='/pages/purse/convert/convert'>
						<view class='pictrue'>
							<image src='../../../static/images/switch.png'></image>
						</view>
						<view>兑换</view>
					</navigator>
				</view>
			</view>
			<home></home>
			<view class="bottom">
				<view class="bottom_zx">
					<view class="text zx_title">积分价格趋势： <text style="color: #1ABB1D;">{{currentPrice}}</text></view>
					<view class="zx">
						<!-- 折线Line纯数字-->
						<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import {
		getProductHot
	} from '@/api/store.js';
	import {
		openRechargeSubscribe
	} from '@/utils/SubscribeMessage.js';
	import home from '@/components/home';
	import {
		genAddress,
		getUserInfo,
		userActivity,
		getuserDalance
	} from '@/api/user.js';


	import {
		chartIncrementTrendApi,
		currentTokenPrice
	} from '@/api/admin.js';

	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import recommend from '@/components/recommend/index';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif

	let _self;
	var canvaArea = null;

	export default {
		components: {
			recommend,
			home,
			// #ifdef MP
			authorize,
			// #endif		
		},
		data() {
			return {
				userInfo: {},
				hostProduct: [],
				isClose: false,
				rechargeSwitch: false,
				activity: {},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				hotScroll: false,
				statistics: {},
				hotPage: 1,
				hotLimit: 10,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				currentPrice: 1
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			_self = this;
			if (this.isLogin) {
				this.getUserInfo();

				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				this.getServerData();
			} else {
				// #ifdef H5 || APP-PLUS
				toLogin();
				// #endif 
				// #ifdef MP
				this.isAuto = true;
				this.$set(this, 'isShowAuth', true)
				// #endif
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getServerData() {
				let Area = {
					categories: [],
					series: [{
						name: '积分价格趋势',
						data: [],
						color: '#2fc25b'
					}]
				};

				chartIncrementTrendApi().then(res => {
					console.log(res.data)
					for (let key in res.data) {
						Area.categories.push(key) // data.push(1+Math.random().toFixed(2))
						Area.series[0].data.push(res.data[key])
					}
					_self.showArea("canvasArea", Area);
				});

				currentTokenPrice().then(res => {
					console.log("current——price" + res.data)
					_self.currentPrice = res.data
				})
			},

			identityResultFormat(cellValue) {
				console.log("identityResultFormat")
				console.log(cellValue)
				if (!cellValue) return "未认证"
				switch (cellValue) {
					case 0:
						return "未认证";
					case 1:
						return "待审核";
					case 2:
						return "认证通过";
					case 3:
						return "认证不过";
					default:
						return "未认证";
				}
			},

			identityResultColor(cellValue) {
				console.log("identityResultFormat")
				console.log(cellValue)
				if (!cellValue) return "bg-gray"
				switch (cellValue) {
					case 0:
						return "bg-gray";
					case 1:
						return "bg-yellow";
					case 2:
						return "bg-green";
					case 3:
						return "bg-red";
					default:
						return "bg-gray";
				}
			},
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						disableGrid: true,
						dashLength: 8,
						labelCount: 7
					},
					yAxis: {
						gridType: 'dash',
						disableGrid: true,
						dashLength: 8,
						splitNumber: 5,
						min:0,
						max:2
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
						},
					}
				});

			},
			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			onLoadFun: function() {
				this.getUserInfo();
			},

			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},

			toIdentity() {
				uni.navigateTo({
					url: '/pages/purse/authentic/identity-authentic'
				})
			},

			/**
			 * 获取用户详情
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					that.rechargeSwitch = res.data.rechargeSwitch;

					if (!res.data.tokenAddress) {
						genAddress().then(res=>{
							that.getUserInfoPure()
						})
					}
				});
			},
			
			getUserInfoPure: function() {
				let that = this;
				getUserInfo().then(res => {
					that.$set(that, 'userInfo', res.data);
					that.rechargeSwitch = res.data.rechargeSwitch;			
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.my-account .wrapper {
		background-color: #fff;
		// padding: 32rpx 0 34rpx 0;
		margin-bottom: 14rpx;
	}

	.my-account .wrapper .header {
		// width: 690rpx;
		// height: 230rpx;
		// background-image: linear-gradient(to right, #f33b2b 0%, #f36053 100%);
		background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
		border-radius: 16rpx;
		// margin: 0 auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}

	.unit {
		font-weight: bold;
		margin-left: 10rpx;
		font-size: 32rpx;
		color: #fff;
		font-family: 'Guildford Pro';
	}

	.my-account .wrapper .header .headerCon {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100%;
		width: 100%;
		padding: 36rpx 0 29rpx 0;
		box-sizing: border-box;
	}

	.my-account .wrapper .header .headerCon .account {
		padding: 0 35rpx;
	}

	.my-account .wrapper .header .headerCon .account .assets .money {
		font-size: 72rpx;
		color: #fff;
		font-family: 'Guildford Pro';
	}

	.my-account .wrapper .header .headerCon .account .recharge {
		font-size: 28rpx;
		width: 150rpx;
		height: 54rpx;
		border-radius: 27rpx;
		background-color: #fff9f8;
		text-align: center;
		line-height: 54rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative {
		margin-top: 46rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative .item {
		flex: 1;
		padding-left: 35rpx;
	}

	.my-account .wrapper .header .headerCon .cumulative .item .money {
		font-size: 48rpx;
		font-family: 'Guildford Pro';
		color: #fff;
		margin-top: 6rpx;
	}

	.my-account .wrapper .nav {
		height: 155rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.my-account .wrapper .nav .item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.my-account .wrapper .nav .item .pictrue {
		width: 44rpx;
		height: 44rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.my-account .wrapper .nav .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-account .wrapper .advert {
		padding: 0 30rpx;
		margin-top: 30rpx;
	}

	.my-account .wrapper .advert .item {
		background-color: #fff6d1;
		width: 332rpx;
		height: 118rpx;
		border-radius: 10rpx;
		padding: 0 27rpx 0 25rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #e44609;
	}

	.my-account .wrapper .advert .item.on {
		background-color: #fff3f3;
		color: #e96868;
	}

	.my-account .wrapper .advert .item .pictrue {
		width: 78rpx;
		height: 78rpx;
	}

	.my-account .wrapper .advert .item .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-account .wrapper .advert .item .text .name {
		font-size: 30rpx;
		font-weight: bold;
		color: #f33c2b;
		margin-bottom: 7rpx;
	}

	.my-account .wrapper .advert .item.on .text .name {
		color: #f64051;
	}

	.my-account .wrapper .list {
		padding: 0 30rpx;
	}

	.my-account .wrapper .list .item {
		margin-top: 44rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont.yellow {
		background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
	}

	.my-account .wrapper .list .item .picTxt .iconfont.green {
		background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
	}

	.my-account .wrapper .list .item .picTxt {
		width: 428rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.my-account .wrapper .list .item .picTxt .text {
		width: 317rpx;
	}

	.my-account .wrapper .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.my-account .wrapper .list .item .bnt {
		font-size: 26rpx;
		color: #282828;
		width: 156rpx;
		height: 52rpx;
		border: 1rpx solid #ddd;
		border-radius: 26rpx;
		text-align: center;
		line-height: 52rpx;
	}

	.my-account .wrapper .list .item .bnt.end {
		font-size: 26rpx;
		color: #aaa;
		background-color: #f2f2f2;
		border-color: #f2f2f2;
	}

	/* 下半部分 */
	.bottom {
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		.bottom_top {
			padding: 0 30rpx;
		}

		.bottom_item {
			width: 100%;
			height: 160rpx;
			padding-top: 30rpx;
			border-bottom: 1px solid rgba(0, 28, 15, 0.17);
			display: flex;
			flex-direction: column;

			.bottom_item_title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.bottom_item_value {
				flex-grow: 1;
				height: 110rpx;
				align-items: center;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

			}
		}

		.bottom_zx {
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			.zx_title {
				padding: 30rpx;
			}

			.zx {
				flex-grow: 1;
				width: 100%;
				// background-color: #C9E9DA;
			}
		}
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
